<style>
    .tableleft,.tableright{
        border-radius: 4px; 
    }
    #dd-config .tableright{
        width: 550px;
    }
    #dd-config .tableleft{
        margin: 0;
        width: 380px;
    }
    .tableArea{
        justify-content: space-between;
    }
    .global_table_header{
        color: #A5AAB7
    }
</style>
<section id="dd-config">
    <div class="wx-header">钉钉团队配置</div>
    <div class="container">
        <div class="wx-gzh">
            <div class="logo pull-left"><img :src="serviceInfo.appIconUrl" /></div>
            <div class="pull-left pl-24 information">
                <div>
                    <span class="color-666">{{serviceInfo.appName || '--'}}</span>
                </div>
                <div>绑定时间：{{serviceInfo.bindTime | timestamp}}</div>
                <div>绑定人：{{serviceInfo.bindUserName || '--'}}</div>
            </div>
        </div>
        <div class="config">
            <div class="subnav-wx">
                <ul>
                    <li v-for="(item, index) in navLiData" @click="navButton(index)" v-if="item.code" :class="{active: index == navAct}">{{item.name}}</li>
                </ul>
            </div>
            <div class="nav-content">
                <!-- 项目配置 -->
                <div class="project" v-if="navAct == 0">
                    <div class="title">
                        <p class="pull-left">项目列表</p>
                        <button type="button" class="btn s-btn-default pull-right" @click="getUserPro" v-if="permissions.indexOf('c208') > -1">管理</button>
                    </div>
                    <ul class="list">
                        <li v-for="(item, index) in proList">
                            <a href="javascript:;">
                                <p>{{item.projectName}}</p>
                                <img :src="item.projectPriviewUrl" alt=""></a>
                        </li>
                    </ul>
                </div>
                <!-- 客户账号管理 -->
                <div class="focus-on" v-if="navAct == 1">
                    <div class="clearfix">
                        <div class="pull-left">客户列表</div>
                        <div class="pull-right">
                            <input type="text" class="form-control inline" placeholder="姓名/账号/电话" v-model="keyWord">
                            <button type="button" class="btn s-btn-default mr-10" @click="search">查询</button>
                            <button type="button" class="btn s-btn-default" @click="reset">重置</button>
                        </div>
                    </div>
                    <div class="tableArea global_table">
                        <div class="tableleft">
                            <ul class="global_table_header">
                                <li>序</li>
                                <li>客户名称</li>
                                <li>电话</li>
                            </ul>
                            <div>
                                <ul class="global_table_item" v-for="(item,index) in customerList" :class="selectedcustomer == item.customerId?'selectCus':''" @click="selectedcus(item,index)">
                                    <li>{{index+1}}</li>
                                    <li>{{item.customerName}}</li>
                                    <li>{{item.cusotmerPhone}}</li>
                                </ul>
                            </div>
                        </div>
                        <div class="tableright">
                            <ul class="global_table_header">
                                <li>序</li>
                                <li>姓名</li>
                                <li>账号</li>
                                <li>电话</li>
                            </ul>
                            <div>
                                <ul class="global_table_item" v-for="(item,index) in ddUser">
                                    <li>{{index+1}}</li>
                                    <li>{{item.userName}}</li>
                                    <li>{{item.userAccount}}</li>
                                    <li>{{item.userPhone}}</li>
                                </ul>
                            </div>
                            
                        </div>
                    </div>
                    <div class="bindbut" @click="bindaccount">绑定客户账号</div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- 绑定账号 -->
    <div class="mark-wx" v-if="isBindalert">
        <div class="pop box-o-shadow ddAccount-pop" v-if="isBindalert" style="width:800px;">
            <div class="head-pop font-16"><span>账号绑定</span>
                <button class="fw-close absolute close" type="button" @click="isBindalert = false">×</button>
            </div>
            <div class="content-pop">
                <div class="content clearfix" style="padding:0px 17px 30px;display: flex">
                    <div class="pull-left" style="width:350px;margin-right: 50px">
                        <p class="title">可选账号</p>
                        <div class="assignees-container">
                            <div class="approve-person"></div>
                        </div>
                    </div>

                    <div class="pull-right" style="width:400px">
                        <p class="title">账号绑定列表</p>

                        <div class="select-member-container" style="width:100%">
                            <ul class="select-member-header">
                                <li>姓名</li>
                                <li>账号</li>
                                <li>电话</li>
                                <li>操作</li>
                            </ul>

                            <ul class="select-member-wrap" v-for="(item,index) in alluser">
                                <li :title="item.name">{{item.name}}</li>
                                <li :title="item.account">{{item.account}}</li>
                                <li :title="item.phone">{{item.phone}}</li>
                                <li><span class="icon-Gm-delete" style="cursor: pointer;" @click="reduceCus(index)"></span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fw-button">
                <button type="button" class="fw-submit yes mr-10" @click="surebind" v-if="permissions.indexOf('c209') > -1">确认</button>
                <button type="button" class="fw-submit no" @click="isBindalert = false">取消</button>
            </div>
        </div>
    </div>
    <!-- 授权项目 -->
    <div class="mark-wx" v-if="userProFlag"></div>
    <div class="toast-wx-project" v-if="userProFlag" style="height:608px">
        <div class="close"><i class="icon-Gm-close" @click="userProFlag = false"></i></div>
        <div class="title">项目管理</div>
        <div class="clearfix plr-24 bg-f7f7f7 line-height-45" style="display:flex">
            <div style="width:600px;margin-right: 25px">项目列表</div>
            <div style="width:224px;">已选列表</div>
        </div>
        <div class="clearfix plr-24 bg-f7f7f7">
            <div class="pull-left memeber-list box-i-shadow-1 br-4 text-center">
                <div class="dy-flex">
                    <div class="dy-fx-1"><span :class="{checkAll:true, cursor:true, active:selectedList.length == userProData.length}" @click="checkAllPro"></span></div>
                    <div class="dy-fx-3">大区</div>
                    <div class="dy-fx-3">公司</div>
                    <div class="dy-fx-3">项目</div>
                </div>
                <div :class="{'dy-flex':true, 'border-t':true, 'color-999':item.flag1}" v-for="(item, index) in userProData">
                    <div class="dy-fx-1" @click="checkRadio(item, index)">
                        <span :class="{checkAll: true, cursor:true, active: item.selected}" v-if="!item.flag1"></span>
                        <span class="checks" v-if="!item.selected"></span>
                    </div>
                    <div class="dy-fx-3">{{item.areaName}}</div>
                    <div class="dy-fx-3 ellipsis-1">{{item.companyName}}</div>
                    <div class="dy-fx-3">{{item.projectName}}</div>
                </div>
            </div>
            <div class="pull-right sidebar-list box-i-shadow-1 br-4 text-center">
                <div class="dy-flex">
                    <div class="dy-fx-1">序</div>
                    <div class="dy-fx-3">项目</div>
                    <div class="dy-fx-2">操作</div>
                </div>
                <div :class="{'dy-flex':true, 'border-t':true}" v-for="(item, index) in selectedList" v-if="item.selected">
                    <div class="dy-fx-1">{{index+1}}</div>
                    <div class="dy-fx-3 ellipsis-1">{{item.projectName}}</div>
                    <div class="dy-fx-2">
                        <i class="icon-Gm-delete"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix plr-24 bg-f7f7f7 line-height-45 border-b">
            <div class="pull-left" style="width:600px;">共<span>{{userProData.length}}</span>条记录</div>
            <div class="pull-right" style="width:224px;">共<span>{{selectedList.length}}</span>条记录</div>
        </div>
        <div class="operation">
            <button type="button" class="btn n-btn-primary" @click="configPro">保存</button>
            <button type="button" class="btn n-btn-outline" @click="userProFlag = false">取消</button>
        </div>
    </div>



</section>
<script src="modules/flow/scripts/approve.js" charset="utf-8"></script>
<script src="modules/system_config/scripts/ddConfig.js" charset="utf-8"></script>